<template>
  <div class="margin-bottom">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in swiperData" :key="item.id">
          <router-link :to="{name: 'course', params: {id: item.courseId}}">
            <img class="siwperSize" v-bind:src="imgBaseUrl + item.coverUrl" alt>
          </router-link>
        </div>
      </div>

      <div class="swiper-pagination"></div>
    </div>

    <!-- 菜单 -->
    <div class="menu-container">
      <div class="user">
        <div>
          <div class="avatar-container">
            <router-link to="/userInfo">
              <div>
                <img class="avatar" v-bind:src="user.avatarUrl" alt>
                <div class="attr">{{user.vip ? '会员' : '非会员'}}</div>
              </div>
            </router-link>
          </div>
          <router-link to="/upgrade">
            <div class="updegreeBtn">{{user.vip ? '会员续费' : '升级会员'}}</div>
          </router-link>
        </div>
      </div>

      <div class="menu-list">
        <div class="menu-item" v-for="item in titleList" :key="item.id">
          <router-link v-bind:to="item.url">
            <div class="icon-container">
              <img class="icon" v-bind:src="item.img" alt>
            </div>
            <div>{{item.name}}</div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 课程分类 -->
    <div class="column-item">
      <columnHeader
        :title="courseColumn.title"
        :description="courseColumn.description"
        :linkUrl="{name: 'category', params: {index: 0}}"
      ></columnHeader>

      <div class="course-container">
        <div v-for="(item, index) in courseColumn.list" :key="item.index">
          <router-link :to="{name: 'category', params: {index: index}}">
            <div class="item">
              <img class="poster" v-bind:src="imgBaseUrl + item.coverUrl" alt>
              <div class="title">{{item.name}}</div>
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 推荐专栏 -->
    <div class="column-item">
      <columnHeader
        :title="recommendColumn.title"
        :description="recommendColumn.description"
        :linkUrl="'/albumAll'"
      ></columnHeader>

      <div class="recommend-container">
        <div v-for="item in recommendColumn.list" :key="item.index">
          <router-link :to="{name: 'courseList', params: {id: item.id}}">
            <div class="item">
              <div>
                <img class="poster" v-bind:src="imgBaseUrl + item.coverUrl" alt>
              </div>
              <div>
                <div class="title">{{item.name}}</div>
                <div class="info" v-if="item.free">
                  <div>
                    <div class="person">
                      <div>
                        <img src="../../images/icon/person.png" alt>
                      </div>
                      <div class="text-999">{{item.alias}}</div>
                    </div>
                    <div class="pageView">
                      <div>
                        <img src="../../images/icon/eye.png" alt>
                      </div>
                      <div class="text-999">{{item.viewNumber}}</div>
                    </div>
                  </div>

                  <div class="price">免费</div>
                </div>
                <div class="info" v-if="!item.free">
                  <div v-if="!item.viewAcl">{{item.buyNumber}}人购买</div>
                  <div class="price" v-if="!item.viewAcl">{{item.free ? '免费' : item.price}}</div>
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </div>

      <!-- <columnFooter :linkUrl="'/category'"></columnFooter>   -->
    </div>

    <!-- 精品课程 -->
    <div class="column-item">
      <columnHeader
        :title="svipColumn.title"
        :description="svipColumn.description"
        :linkUrl="'/courseAll'"
      ></columnHeader>

      <!-- <div class="sort-container">
        <div class="item">
          <div>全部</div>
          <div>
            <img class="arrow-icon" src="../../images/icon/arrow.png" alt>
          </div>
        </div>
        <div class="item">
          <div>排序</div>
          <div>
            <img class="arrow-icon" src="../../images/icon/arrow.png" alt>
          </div>
        </div>
        <div class="item">
          <div>筛选</div>
          <div>
            <img class="arrow-icon" src="../../images/icon/arrow.png" alt>
          </div>
        </div>
      </div>-->
      <div class="svip-container">
        <div v-for="item in svipColumn.list" :key="item.index">
          <router-link :to="{name: 'course', params: {id: item.id}}">
            <div class="item">
              <div>
                <img class="poster" v-bind:src="imgBaseUrl + item.coverUrl" alt>
              </div>

              <div>
                <div>
                  <div class="title">{{item.name}}</div>
                </div>
                <div class="info">
                  <div>
                    <div class="price">{{item.price}}</div>
                    <div class="person">
                      <div>
                        <img src="../../images/icon/person.png" alt>
                      </div>
                      <div class="text-999">{{item.alias}}</div>
                    </div>
                  </div>

                  <div>
                    <div class="text-999">{{item.buyNumber}}人购买</div>
                    <div class="pageView">
                      <div>
                        <img src="../../images/icon/eye.png" alt>
                      </div>
                      <div class="text-999">{{item.viewNumber}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </div>
      <columnFooter :linkUrl="'/courseAll'"></columnFooter>
    </div>

    <!-- 公司介绍 -->
    <!-- <div class="contact-container">
      <div>公司简介</div>
      <div class="border-right"></div>
      <div>联系我们</div>
    </div>-->
    <!-- tab导航 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

import columnHeader from "src/components/common/columnHeader";
import columnFooter from "src/components/common/columnFooter";
import tabbar from "src/components/tab/tabbar";

import fetch from "../../config/fetch";
import $ from "jquery";

import { mapState, mapGetters, mapActions } from "vuex";

import { imgBaseUrl } from "../../config/env";
import {
  login,
  loginWeb,
  getCategory,
  getBanner,
  getUserInfo,
  getAlbumList,
  getCourseList,
  getConfigAll
} from "../../service/getData";
import { setInterval, clearInterval, setTimeout } from "timers";

export default {
  data() {
    return {
      token: "",
      data: "default",
      imgBaseUrl: imgBaseUrl,
      swiperData: [],
      titleList: [
        {
          img: require("../../images/icon/integral.png"),
          name: "我的积分",
          url: "/integral",
          params: ""
        },
        {
          img: require("../../images/icon/student.png"),
          name: "我的同学",
          url: "/classmates",
          params: ""
        },
        {
          img: require("../../images/icon/hat.png"),
          name: "奖学金",
          url: "/scholarship",
          params: ""
        },
        {
          img: require("../../images/icon/list.png"),
          name: "观看记录",
          url: "/record",
          params: ""
        }
        // {
        //   img: require("../../images/icon/star.png"),
        //   name: "关注公众号",
        //   url: "/star",
        //   params: ""
        // },
        // {
        //   img: require("../../images/icon/teacher.png"),
        //   name: "班主任",
        //   url: "/teacher",
        //   params: ""
        // }
      ],
      user: {},

      courseColumn: {
        title: "课程分类",
        description: "涵盖人生每一个阶段",
        list: []
      },
      recommendColumn: {
        title: "推荐专栏",
        description: "综合 专业 深度",
        list: []
      },
      svipColumn: {
        title: "精品课程",
        description: "身边的人都在学",
        list: []
      }
    };
  },
  components: {
    columnHeader,
    columnFooter,
    tabbar
  },
  mounted() {
    this.newSwiper();
    this.login();
  },
  computed: {
    ...mapState({
      //用mapState来获取collection.js里面的state的属性值
      userToken: state => state.collection.collects,
      userInfo: state => state.collection.collects
    })
  },
  methods: {
    gotoCourse(index) {},
    newSwiper: function() {
      let mySwiper = new Swiper(".swiper-container", {
        loop: true, // 循环模式选项
        autoplay: true, //等同于以下设置
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination"
        }
      });
    },
    login: function() {
      if (!this.$store.userToken) {
        setTimeout(() => {
          this.login();
        }, 500);
        return;
      } else {
        this.init();
      }
    },

    init: function() {
      // 分类
      getCategory(this.$store.userToken).then(res => {
        this.courseColumn.list = res;
      });

      // 系统配置
      getConfigAll(this.$store.userToken).then(res => {
        this.$store.configAll = res;
      });

      // swiperList
      getBanner(this.$store.userToken).then(res => {
        this.swiperData = res;
      });

      // 用户信息
      getUserInfo(this.$store.userToken).then(res => {
        this.user = res;
        this.$store.userInfo = res;
        this.titleList[0].params = res.score;
      });

      // 推荐专栏
      getAlbumList(this.$store.userToken, 1, 3).then(res => {
        this.recommendColumn.list = res.content;
      });

      // 精品课程
      getCourseList(this.$store.userToken, 1, 3).then(res => {
        this.svipColumn.list = res.content;
      });
    },

    GetUrlParam(paraName) {
      var url = document.location.toString();
      console.log("url: ", url);
      var arrObj = url.split("?");

      if (arrObj.length > 1) {
        var arrPara = arrObj[1].split("&");
        var arr;

        for (var i = 0; i < arrPara.length; i++) {
          arr = arrPara[i].split("=");

          if (arr != null && arr[0] == paraName) {
            return arr[1];
          }
        }
        return "";
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin.scss";

.margin-bottom {
  margin-bottom: 1.5rem;
}

.siwperSize {
  height: 4rem;
  width: 7.5rem;
}

.baseColor {
  color: #16e08f;
}

.menu-container {
  background: #fff;
  @include fj(space-around);
  @include sc(0.28rem, #ccc);

  .user {
    @include fj(center);
    background: #16e08f;
    width: 40%;
    align-items: center;

    .avatar-container {
      @include fj(center);
      text-align: center;

      .avatar {
        height: 1rem;
        width: 1rem;
        border-radius: 50%;
        border: 0.08rem solid #fff;
      }

      .attr {
        @include sc(0.24rem, #fff);
      }
    }

    .updegreeBtn {
      @include sc(0.32rem, #16e08f);
      background: #fff;
      border-radius: 25px;
      text-align: center;
      padding: 0.1rem 0.16rem;
      margin-top: 0.4rem;
    }
  }

  .menu-list {
    @include fj(flex-start);
    flex-wrap: wrap;

    .menu-item {
      @include fj(center);
      @include sc(0.26rem, #666);
      width: 33%;
      margin: 0.2rem 0;

      .icon-container {
        @include fj(center);
        margin-bottom: 0.1rem;

        .icon {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
    }
  }
}

.column-item {
  background: #fff;
  @include sc(0.28rem, #ccc);
  margin-top: 0.2rem;
}

// 课程
.course-container {
  @include fj(flex-start);
  flex-wrap: wrap;

  .item {
    position: relative;
    // float: left;
    width: 3.5rem;
    height: 2.6rem;
    margin: 0.2rem 0.1rem 0.2rem 0.1rem;

    .poster {
      width: 3.5rem;
      height: 2.6rem;
      // margin: 0.2rem 0.1rem 0.2rem 0.1rem;
    }

    .title {
      position: absolute;
      right: 0;
      bottom: 0;
      // z-index: 99;
      color: #fff;
    }
  }
}

// 推荐
.recommend-container {
  .item {
    @include fj(space-between);
    margin: 0.2rem 0.1rem 0.2rem 0.1rem;
    border-bottom: 2px solid #f1f1f1;

    .poster {
      width: 3.5rem;
      height: 2.6rem;
      margin: 0rem 0.1rem;
    }

    .title {
      font-size: 0.34rem;
      height: 1.5rem;
      padding: 0.1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .info {
      @include fj(space-between);
      padding: 0.1rem;
      align-items: center;

      .text-999 {
        @include sc(0.28rem, #999);
      }

      .person {
        @include fj(flex-start);
        // margin-top: 0.1rem;

        img {
          height: 0.4rem;
          width: 0.4rem;
          margin-right: 0.1rem;
        }
      }

      .pageView {
        @include fj(flex-start);
        // margin-top: 0.1rem;

        img {
          height: 0.4rem;
          width: 0.4rem;
          margin-right: 0.1rem;
        }
      }

      .price {
        color: #049009;
        margin: 0rem 0.1rem;
        font-size: 0.35rem;
      }

      .price::before {
        content: "￥";
        font-size: 0.28rem;
      }
    }
  }

  .item > div {
    width: 50%;
  }
}

// 排序
.sort-container {
  @include fj(space-around);

  .item {
    @include fj(space-between);
    width: 1.1rem;

    .arrow-icon {
      height: 0.4rem;
      width: 0.4rem;
    }
  }
}

.svip-container {
  .item {
    @include fj(flex-start);
    border-bottom: 2px solid #f1f1f1;

    .poster {
      width: 3.5rem;
      height: 2.6rem;
      margin: 0.2rem 0.1rem;
    }

    .title {
      font-size: 0.35rem;
      margin: 0.2rem 0.1rem;
      height: 1.2rem;
    }

    .price {
      color: #049009;
      // margin: 0.2rem 0.1rem;
      font-size: 0.35rem;
    }

    .price::before {
      content: "￥";
      font-size: 0.28rem;
    }

    .info {
      @include fj(space-between);
      align-items: center;
      width: 3.5rem;

      .person {
        @include fj(space-around);
        margin-top: 0.1rem;

        img {
          height: 0.4rem;
          width: 0.4rem;
          margin-right: 0.1rem;
        }
      }

      .pageView {
        @include fj(space-around);
        margin-top: 0.1rem;

        img {
          height: 0.4rem;
          width: 0.4rem;
          margin-right: 0.1rem;
        }
      }

      .text-999 {
        @include sc(0.28rem, #999);
      }
    }
  }
}

.contact-container {
  @include fj(center);
  font-size: 0.44rem;
  height: 2rem;
  line-height: 2rem;
  background: #fff;
  margin-top: 0.2rem;
  text-align: center;

  .border-right::after {
    content: "";
    border-right: 0.01rem solid #000;
    color: #333;
    margin: 1rem;
  }
}
</style>
